
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head><title>Simple jsp page</title></head>
<style type="text/css">
	body{text-align: center;}
	#wrapper{width: auto; margin-right: 90;margin-left:10; text-align: center;}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/jquery.js"></script>


<script type="text/javascript" src="${pageContext.request.contextPath}/lib/geoxml3.js"></script>
<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?v=3.6&sensor=false&libraries=geometry">
</script>

<script type="text/javascript">
var map;
// Create a meausure object to store our markers, MVCArrays, lines and polygons
var measure = {
    mvcLine: new google.maps.MVCArray(),
    mvcPolygon: new google.maps.MVCArray(),
    mvcMarkers: new google.maps.MVCArray(),
    line: null,
    polygon: null
};

$(document).ready(function () {
	displayKmlTest();
});



function displayKmlTest() {
		$('#map').show();
		//var kmlStr = $('#kml').val();
		var cordinate = $('#latlan').val();
		var kmlReferenceNumber=$('#refNo').val();
		var middlePoint=$('#middle').val();

        var melbourne = new google.maps.LatLng(-122.0822035425683, 37.42228990140251);
        var mapOptions = {
            zoom:      12,
            center:    melbourne,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggableCursor: "crosshair"
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});

        var kml = "<kml><Placemark><name>Land</name><Polygon><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><outerBoundaryIs><LinearRing><coordinates>" + cordinate + " </coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name>" + kmlReferenceNumber + "</name><description>Middle of the Land</description><Point><coordinates>" + middlePoint + "</coordinates><referenceNo>" + kmlReferenceNumber + "</referenceNo></Point></Placemark></kml>";

		geoXml.parseKmlString(kml);

        google.maps.event.addListener(map, "click", function(evt) {
            // When the map is clicked, pass the LatLng obect to the measureAdd function
            measureAdd(evt.latLng);
        });

	calcArea(cordinate);
}

function calcArea(cordinate) {

		var latLanAlt=cordinate.split(" ");
		for(var i = 0;i<latLanAlt.length;i++){
			 var latLan = latLanAlt[i].split(",");

			 var lat=latLan[1];
			 var lan=latLan[0];
			 measureAdd(new google.maps.LatLng(lat,lan));


		}


}

function hideKmlMap() {
    $('#map').hide();
    measureReset();
}

function measureAdd(latLng) {
    // Add a draggable marker to the map where the user clicked
    var marker = new google.maps.Marker({
        map: map,
        position: latLng,
        draggable: true,
        raiseOnDrag: false,
        title: "Drag me to change shape",
        icon: new google.maps.MarkerImage("measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5))
    });

    // Add this LatLng to our line and polygon MVCArrays
    // Objects added to these MVCArrays automatically update the line and polygon shapes on the map
    measure.mvcLine.push(latLng);
    measure.mvcPolygon.push(latLng);

    // Push this marker to an MVCArray
    // This way later we can loop through the array and remove them when measuring is done
    measure.mvcMarkers.push(marker);

    // Get the index position of the LatLng we just pushed into the MVCArray
    // We'll need this later to update the MVCArray if the user moves the measure vertexes
    var latLngIndex = measure.mvcLine.getLength() - 1;

    // When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved
    google.maps.event.addListener(marker, "mouseover", function() {
        marker.setIcon(new google.maps.MarkerImage("${pageContext.request.contextPath}/images/measure-vertex.png", new google.maps.Size(15, 15), new google.maps.Point(0, 0), new google.maps.Point(8, 8)));
    });

    // Change back to the default marker when the user mouses out
    google.maps.event.addListener(marker, "mouseout", function() {
        marker.setIcon(new google.maps.MarkerImage("${pageContext.request.contextPath}/images/measure-vertex.png", new google.maps.Size(9, 9), new google.maps.Point(0, 0), new google.maps.Point(5, 5)));
    });

    // When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
    //     LatLng at this position
    google.maps.event.addListener(marker, "drag", function(evt) {
        measure.mvcLine.setAt(latLngIndex, evt.latLng);
        measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
    });

    // When dragging has ended and there is more than one vertex, measure length, area.
    google.maps.event.addListener(marker, "dragend", function() {
        if (measure.mvcLine.getLength() > 1) {
            measureCalc();
        }
    });

    // If there is more than one vertex on the line
    if (measure.mvcLine.getLength() > 1) {

        // If the line hasn't been created yet
        if (!measure.line) {

            // Create the line (google.maps.Polyline)
            measure.line = new google.maps.Polyline({
                map: map,
                clickable: false,
                strokeColor: "#FF0000",
                strokeOpacity: 1,
                strokeWeight: 3,
                path:measure.mvcLine
            });

        }

        // If there is more than two vertexes for a polygon
        if (measure.mvcPolygon.getLength() > 2) {

            // If the polygon hasn't been created yet
            if (!measure.polygon) {

                // Create the polygon (google.maps.Polygon)
                measure.polygon = new google.maps.Polygon({
                    clickable: false,
                    map: map,
                    fillOpacity: 0.25,
                    strokeOpacity: 0,
                    paths: measure.mvcPolygon
                });

            }

        }

    }

    // If there's more than one vertex, measure length, area.
    if (measure.mvcLine.getLength() > 1) {
        measureCalc();
    }

}

function measureCalc() {

    // Use the Google Maps geometry library to measure the length of the line
    var length = google.maps.geometry.spherical.computeLength(measure.line.getPath());
    jQuery("#span-length").text(length.toFixed(1))

    // If we have a polygon (>2 vertexes in the mvcPolygon MVCArray)
    if (measure.mvcPolygon.getLength() > 2) {
        // Use the Google Maps geometry library to measure the area of the polygon
        var area = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
        jQuery("#span-area").text(area.toFixed(1));
		var hec=area/10000;
		setArea(hec);


    }

}

function measureReset() {

    // If we have a polygon or a line, remove them from the map and set null
    if (measure.polygon) {
        measure.polygon.setMap(null);
        measure.polygon = null;
    }
    if (measure.line) {
        measure.line.setMap(null);
        measure.line = null
    }

    // Empty the mvcLine and mvcPolygon MVCArrays
    measure.mvcLine.clear();
    measure.mvcPolygon.clear();

    // Loop through the markers MVCArray and remove each from the map, then empty it
    measure.mvcMarkers.forEach(function(elem, index) {
        elem.setMap(null);
    });
    measure.mvcMarkers.clear();

    jQuery("#span-length,#span-area,#span-hec,#span-acrc,#span-roods,#span-perche").text(0);

}

function setArea(hec) {

    var he = 0,ac = 0,ro = 0,pe = 0,temp = 0;
    var cont = 2.47105381467;
    he = (hec.length == 0)?0:hec;
    if (1 > he > 0) {
        he = parseFloat(he);
    }

    ac = Math.floor(he * cont);
    temp = (he * cont - ac) * 4;
    ro = Math.floor(temp);
    temp = (temp - ro) * 40;
    pe = temp.toFixed(4);

	jQuery("#span-hec").text(he.toFixed(4));
	jQuery("#span-acrc").text(ac);
	jQuery("#span-roods").text(ro);
	jQuery("#span-perche").text(pe);

}

</script>
<div id="wrapper">
<tr id="kmlFile">
    <td colspan="4">
<tr>
    <td>
        <h1>Mobile Area Calculator</h1>
    </td>
</tr>
<tr>
    <td>
        <input value="View Map" type="button" onclick="displayKmlTest();">
        <input value="Hide Map" type="button" onclick="hideKmlMap();">
    </td>
</tr>
<table>
	<col width="200px"/>
	<col/>
    <tr>

		<td>
				<b>Length : <span id="span-length">0</span> m </b><br>
				<b>Area: <span id="span-area">0</span> m�  </b><br>
				<h3>Hectare: <span id="span-hec">0</span>   </h3><br><br>
		</td>
		<td style="font-size: 15pt;">
				<b>Acre: <span id="span-acrc">0</span></b> &nbsp;&nbsp;
				<b>Roods: <span id="span-roods">0</span></b> &nbsp;&nbsp;
				<b>Perches: <span id="span-perche">0</span> </b>&nbsp;&nbsp;
				<a href="javascript:measureReset();">Reset</a>

		</td>
	</tr>

    <tr>
        <td colspan="2">
            <div id="map">
                <div id='map_canvas' style='height:500px; width: 900px'></div>
            </div>
        </td>

    </tr>

</table>
</td>
</tr>
<input type="hidden" id="latlan" value="<%=request.getParameter("latlan")%>"/>
<input type="hidden" id="refNo" value="<%=request.getParameter("refNo")%>"/>
<input type="hidden" id="middle" value="<%=request.getParameter("middle")%>"/>

   <%-- <s:hidden id="latlan" value="<%=request.getParameter("latlan")%>"/>
    <s:hidden id="refNo" value="<%=request.getParameter("refNo")%>"/>
    <s:hidden id="middle" value="<%=request.getParameter("middle")%>"/>--%>

</div>
</html>